<template>
  <div>
    <div v-for="item of props.data" :key="item.id" class="concern-user">
      <div class="concern-left" @click="toUser(item.user?.id)">
        <div style="margin-right: 10px">
          <el-avatar :src="item.user?.avatar" :size="size">
            {{ item.user?.nickname }}
          </el-avatar>
        </div>
        <div>
          <div class="single-ell common-f-16">{{ item.user?.nickname }}</div>
          <div class="fcolor single-ell">这个人没有简介啊~</div>
        </div>
      </div>
      <div class="concern-right">
        <div class="fcolor">
          {{ tool.formatDateToYYYYMMDD(item.createTime) }}
        </div>
        <div v-if="props.type === 1">
          <el-button
            type="info"
            :icon="Finished"
            size="small"
            plain
            v-if="item.user?.isFollowed === 1"
            @click="followed(0, item.user?.id)"
          >
            已关注
          </el-button>
          <el-button
            :icon="Plus"
            type="warning"
            plain
            v-else
            @click="followed(1, item.user?.id)"
            >关注</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits } from "vue";
import { Finished, Plus } from "@element-plus/icons-vue";
import tool from "@/assets/js/tool";
import { useRouter } from "vue-router";

const emits = defineEmits(["followed"]);
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  mobile: {
    type: String,
    default: "true",
  },
  type: {
    type: Number,
    default: 1,
  },
});

const router = useRouter();

const followed = (type, uid) => {
  emits("followed", type, uid);
};

const toUser = (id) => {
  console.log(id);
  router.push({
    path: "/client/userinfo",
    query: { uid: id },
  });
};

const size = computed(() => {
  return props.mobile === "false" ? 40 : 50;
});
</script>

<style scoped lang="scss">
.concern-user {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  &:hover {
    background: #f2f0f4;
    cursor: pointer;
  }

  .concern-left {
    display: flex;
    align-items: center;
  }
  .concern-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > div {
      margin-right: 10px;
    }
  }
}
</style>
